<template>
  <div>
    <panel-head :route="route" />
    <div class="btns">
      <el-button :icon="Plus" type="primary" size="small" @click="open(null)">
        新增
      </el-button>

    </div>

    <el-table :data="tabData.list" style="width: 100%">
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="昵称" />
      <el-table-column prop="permissionName" label="菜单权限" width="500px" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="open(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-info">
      <el-pagination
        v-model:current-page="paginationData.pageNum"
        :page-size="paginationData.pageSize"
        :background="false"
        size="small"
        layout="->, total, prev, pager, next"
        :total="tabData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      v-model="dialogFormVisible"
      title="添加权限"
      :before-close="beforeClose"
      width="500"
    >
      <el-form
        ref="formRef"
        label-width="100px"
        label-position="left"
        :model="form"
        :rules="rules"
      >
        <el-form-item v-show="false" prop="id">
          <el-input v-model="form.id" />
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请填写权限名称" />
        </el-form-item>

        <el-form-item label="权限" prop="permissions" />
        <el-tree
          ref="treeRef"
          style="max-width: 600px"
          :data="permissionData"
          show-checkbox
          node-key="id"
          :default-checked-keys="defaultKeyd"
          :default-expanded-keys="[2]"
        />
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm(formRef)">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { userGetmenu, userSetmenu, menuList } from '../../../api'
import { Plus } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

const route = useRoute()

onMounted(() => {
  userGetmenu().then(({ data }) => {
    permissionData.value = data.data
  })
  getListData()
})
const formRef = ref()

// eslint-disable-next-line no-unused-vars
const open = (rowData = {}) => {
  dialogFormVisible.value = true
  // form弹窗打开生成是异步的
  nextTick(() => {
    if (rowData) {
      console.log(rowData)
      // nextTick不能直接赋值，需要使用浅拷贝
      Object.assign(form, { id: rowData.id, name: rowData.name })
      treeRef.value.setCheckedKeys(rowData.permission)
    }
  })
}

const tabData = reactive({
  list: [],
  total: 0
})

const paginationData = reactive({
  pageNum: 1,
  pageSize: 10
})

// 点击页码
// eslint-disable-next-line no-unused-vars
const handleSizeChange = (val) => {
  paginationData.pageNum = val
  getListData()
}

// 选择页面
// eslint-disable-next-line no-unused-vars
const handleCurrentChange = (val) => {
  paginationData.pageSize = val
  getListData()
}

// 请求列表数据
const getListData = () => {
  menuList(paginationData).then(({ data }) => {
    if (data.code === 10000) {
      const { list, total } = data.data
      tabData.list = list
      tabData.total = total

      console.log(data)
    }
  })
}

// form表单数据
const form = reactive({
  id: '',
  name: '',
  permissions: ''
})

// 菜单权限权限树形
const permissionData = ref([])

// 控制弹窗的显示
const dialogFormVisible = ref(false)

// 关闭弹窗在回调
const beforeClose = () => {
  dialogFormVisible.value = false
  // 重置表单数据
  formRef.value.resetFields()
  // tree选择重置
  treeRef.value.setCheckedKeys(defaultKeyd)
}

// 选中权限
const defaultKeyd = [4, 5]
const treeRef = ref()

// 表单校验
// eslint-disable-next-line no-unused-vars
const rules = reactive({
  name: [{ required: true, trigger: 'blur', message: '请输入权限名称' }]
})

// 表单提交
// eslint-disable-next-line no-unused-vars
const confirm = async(formEl) => {
  console.log(formEl)
  if (!formEl) return
  console.log('chufa', formEl)
  // 手动触发校验
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(form, 'submit!')
      const permissions = JSON.stringify(treeRef.value.getCheckedKeys())
      userSetmenu({ name: form.name, permissions: permissions, id: form.id }).then(({ data }) => {
        if (data.code === 10000) {
          console.log(data)
        }
        beforeClose()
        getListData()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style lang="less"  scoped>
.btns{
  padding: 10px 0 10px 10px;
  background-color: #fff;
}
</style>
